<template>
<div class="shangjia">
	<ul class="left">
		<li v-for="(json,i) in items1" @click="a(i)"><span></span>{{json.item1}}</li>
	</ul>
	<div class="right">
		<ul  v-show="b">
			<li v-for="(json,j) in items2">
				<div><img src="../assets/index/jiujiang.jpg" alt=""></div>
				<div>
					<h6>{{json.h1}}</h6>
					<p><img src="../assets/index/song.png" alt=""><span>{{json.h1_1}}</span></p>
					<p>{{json.h1_2}}</p>
					<p>{{json.h1_3}}</p>
				</div>
			</li>
		</ul>
		<ul v-show="n">
			<li v-for="(json,j) in items2">
				<div><img src="../assets/index/jiujiang.jpg" alt=""></div>
				<div>
					<h6>{{json.h1}}</h6>
					<p><img src="../assets/index/song.png" alt=""><span>{{json.h1_1}}</span></p>
					<p>{{json.h1_2}}</p>
					<p>{{json.h1_3}}</p>
				</div>
			</li>
		</ul>
		<ul v-show="n">
			<li v-for="(json,j) in items2">
				<div><img src="../assets/index/jiujiang.jpg" alt=""></div>
				<div>
					<h6>{{json.h1}}</h6>
					<p><img src="../assets/index/song.png" alt=""><span>{{json.h1_1}}</span></p>
					<p>{{json.h1_2}}</p>
					<p>{{json.h1_3}}</p>
				</div>
			</li>
		</ul>
		<ul v-show="n">
			<li v-for="(json,j) in items2">
				<div><img src="../assets/index/jiujiang.jpg" alt=""></div>
				<div>
					<h6>{{json.h1}}</h6>
					<p><img src="../assets/index/song.png" alt=""><span>{{json.h1_1}}</span></p>
					<p>{{json.h1_2}}</p>
					<p>{{json.h1_3}}</p>
				</div>
			</li>
		</ul>
		<ul v-show="n">
			<li v-for="(json,j) in items2">
				<div><img src="../assets/index/jiujiang.jpg" alt=""></div>
				<div>
					<h6>{{json.h1}}</h6>
					<p><img src="../assets/index/song.png" alt=""><span>{{json.h1_1}}</span></p>
					<p>{{json.h1_2}}</p>
					<p>{{json.h1_3}}</p>
				</div>
			</li>
		</ul>
		<ul v-show="n">
			<li v-for="(json,j) in items2">
				<div><img src="../assets/index/jiujiang.jpg" alt=""></div>
				<div>
					<h6>{{json.h1}}</h6>
					<p><img src="../assets/index/song.png" alt=""><span>{{json.h1_1}}</span></p>
					<p>{{json.h1_2}}</p>
					<p>{{json.h1_3}}</p>
				</div>
			</li>
		</ul>
	</div>
</div>
</template>
<script>
	export default {
		data() {
		return{
			b:true,
			n:false,
			items1:[],		
			items2:[
				{h1:"星河丹堤地产",h1_1:"[ 惠阳 淡水 ]",h1_2:"户型： 2室| 3室 | 4室",h1_3:"元旦优惠价：8500元/㎡"},
				{h1:"星河丹堤地产",h1_1:"[ 惠阳 淡水 ]",h1_2:"户型： 2室| 3室 | 4室",h1_3:"元旦优惠价：8500元/㎡"},
				{h1:"星河丹堤地产",h1_1:"[ 惠阳 淡水 ]",h1_2:"户型： 2室| 3室 | 4室",h1_3:"元旦优惠价：8500元/㎡"},
				{h1:"星河丹堤地产",h1_1:"[ 惠阳 淡水 ]",h1_2:"户型： 2室| 3室 | 4室",h1_3:"元旦优惠价：8500元/㎡"},
				{h1:"星河丹堤地产",h1_1:"[ 惠阳 淡水 ]",h1_2:"户型： 2室| 3室 | 4室",h1_3:"元旦优惠价：8500元/㎡"},
				{h1:"星河丹堤地产",h1_1:"[ 惠阳 淡水 ]",h1_2:"户型： 2室| 3室 | 4室",h1_3:"元旦优惠价：8500元/㎡"},
				{h1:"星河丹堤地产",h1_1:"[ 惠阳 淡水 ]",h1_2:"户型： 2室| 3室 | 4室",h1_3:"元旦优惠价：8500元/㎡"},
				{h1:"星河丹堤地产",h1_1:"[ 惠阳 淡水 ]",h1_2:"户型： 2室| 3室 | 4室",h1_3:"元旦优惠价：8500元/㎡"},
				{h1:"星河丹堤地产",h1_1:"[ 惠阳 淡水 ]",h1_2:"户型： 2室| 3室 | 4室",h1_3:"元旦优惠价：8500元/㎡"}
			]		
		}
	},
 	created:function  () {
	var arr_r=["银行信息","房产信息","银行信息","房产信息","银行信息","房产信息"];
	for (var i = 0; i < arr_r.length; i++) {
		this.items1[i] = {};
		this.items1[i].item1 = arr_r[i];
	}
	},
	methods:{

	}
	

	
}
</script>
<style>
.shangjia{overflow: hidden;}
.left{width: 1.05rem;background: #f2f2f2;height: 4.77rem;float: left;} 
.left li{width: 1.05rem;height: .5rem;text-align: center;line-height: .5rem;position: relative;font-size: .15rem;margin-top: .1rem;}
.left li span{width: .06rem;height: 100%;background: #f2f2f2;display: inline-block;position:absolute;left:0;}
.left li:nth-child(1) span{background: #f29004;}

.left li:nth-child(1){background: #e6e6e6;color:#f29004; }

.right {float: left;overflow-x:scroll;height: 4.77rem;margin-top: .1rem;}
.right li{overflow: hidden;}
.right li>div{float: left;margin-left: .1rem;}
.right li{margin-bottom: .1rem;}
.right li>div:nth-child(1) img{border:1px solid #ccc;}
</style>